<template>
    <div class="address-list">
        <div class="address" v-for="(item, key) in addressList" :key="key">
            <div class="single-address">
                <div class="address-content">
                    <div class="address-person">
                        <div class="address-name">{{item.name}}</div>
                        <div class="address-phone">{{item.phone |star('phone')}}</div>
                    </div>
                    <div class="address-detail">
                       收货地址：{{item.province + item.city + item.county + item.address}}
                    </div>
                </div>
                <div class="line"></div>
                <div class="address-operate">
                    <div class="address-default">
                        <div class="default"  @click="setDefault(item.id)">
                            <svg aria-hidden="true" class="icon-check" :class="item.id == getDefauleId ? 'choose' : 'no-choose' ">
                                <use xlink:href="#icon-selected"></use>
                            </svg>
                            默认地址
                        </div>
                    </div>
                    <div class="address-edit">
                        <span class="edit" @click="editAddress(item.id)">
                            <svg aria-hidden="true" class="icon-edit">
                                <use xlink:href="#icon-user-bj"></use>
                            </svg>
                            编辑
                        </span>
                        <span class="del"  @click="delAddress(item)">
                            <svg aria-hidden="true" class="icon-del">
                                <use xlink:href="#icon-user-sc"></use>
                            </svg>
                            删除
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <confirm ref="confirm" :text="confirmText" confirmText="确定" @confirm="operaSure()"/>
        <div class="bottom">
            <div class="confirm" @click="toAddAddress">+新建地址</div>
        </div>
    </div>
</template>

<script>
    import API from '../../../request/api';
    import Confirm from "../../../components/common/confirm";

    export default {
        components: {Confirm},
        name: "address-list",
        data() {
            return{
                addressList: [],
                checkState: false,
                defaultId: '',
                confirmText: '', //提示框显示内容
                confirmOpera: '', //提示框选择确认后的操作
                operaId: '', //选择操作的地址Id
            }
        },
        computed:{
            getDefauleId(){
                if(this.defaultId === '') {
                    // let flag = false;
                    this.addressList.filter(it=>{
                        if (it.default == 1) {
                            this.defaultId = it.id
                        }
                    })
                }

                return this.defaultId
            }
        },
        created() {
            this.getAddressList();
        },
        methods: {
            getAddressList(){
                // 获取 地址列表
                this.request.get(API.getAddressList).then((result) =>{
                    this.addressList = this.addressList.concat(result.list);
                    console.log('getAddressList-result',result, this.addressList)
                }).catch((err) => {
                    this.$toast.fail(err);
                });
            },
            operaSure(){
                if(this.confirmOpera === 'set'){
                    this.setDefaultSure()
                }
                if(this.confirmOpera === 'del'){
                    this.delAddressSure()
                }
            },
            setDefault(id){
                if(id !== this.getDefauleId) {
                    this.confirmText = '确定要将此地址设为默认吗？';
                    this.confirmOpera = 'set';
                    this.operaId = id;
                    this.$refs.confirm.show();
                }
            },
            setDefaultSure(){
                // 设置默认地址
                this.request.post(API.addressSetDefault,{
                    id: this.operaId
                }).then((result) =>{
                    console.log('addressSetDefault-result',result);
                    this.defaultId = this.operaId;
                }).catch((err) => {
                    this.$toast.fail(err);
                });
            },
            editAddress(id){
                this.$router.push({
                    name: 'address-edit',
                    query:{
                        id: id
                    },
                })
            },
            delAddress(item){
                if(item.id !== this.getDefauleId){
                    this.confirmText = '确定要删除此地址吗？';
                    this.confirmOpera = 'del';
                    this.operaId = item.id;
                    this.$refs.confirm.show();
                } else {
                    this.$toast('默认地址不可删除！')
                }

            },
            delAddressSure(){
                // 删除地址
                this.request.post(API.addressDel,{
                    id: this.operaId
                }).then((result) =>{
                    console.log('addressDel-result',result);
                    if(result.length === 0){
                        this.addressList = [];
                        this.getAddressList();
                        this.$toast({
                            message: '删除成功！',
                            duration: 500
                        });
                    }
                }).catch((err) => {
                    this.$toast.fail(err);
                });
            },
            toAddAddress(){
                let data = {};
                data.direct = true;
                if(this.addressList.length === 0){
                    data.set = true
                }
                this.$router.push({
                    name: 'address-add',
                    query: data,
                })
            }
        },
        mounted() {
        }
    }
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
    @import '~@/assets/main.styl'
    .line{
        position relative
        line()
        margin-top titleMargin
    }
    .address-list{
        width vw(375)
        margin-bottom vw(80)
        overflow-x hidden
    }
    .address{
        padding cellPadding cellPadding 0 cellPadding
        background-color grayF
        margin-bottom smallMargin
        height vw(111) - cellPadding
    }
    .single-address{
        width 100%
        margin-bottom smallMargin
        .address-content{
            height vw(68)- cellPadding
            .address-person{
                display flex
                justify-content space-between
                word-vw(word14, gray3)
                line-height vw(19)
            }
            .address-detail{
                word-vw(word12, gray9)
                line-height vw(16)
                margin-top titleMargin
            }
        }
        .address-operate{
            height vw(41)- cellPadding
            word-vw(word12, gray3)
            line-height vw(16)
            display flex
            justify-content space-between
            margin-top smallMargin
            .address-default{
                display flex
                .default{
                    display flex
                    justify-items center
                    .icon-check {
                        width vw(15)
                        height vw(15)
                        fill grayE
                        margin-right smallMargin
                    }
                    .no-choose {
                        fill grayE
                    }
                    .choose {
                        fill main-color
                    }
                }
            }
            .address-edit{
                display flex
                .del{
                    display flex
                    justify-items center
                    margin-left middleMargin
                    .icon-del{
                        width vw(16)
                        height vw(16)
                        fill gray9
                        margin-right titleMargin
                    }
                }
                .edit{
                    display flex
                    justify-items center
                    .icon-edit{
                        width vw(16)
                        height vw(16)
                        fill gray9
                        margin-right titleMargin
                    }
                }

            }
        }
    }
    .bottom {
        background grayF
        position fixed
        bottom 0
        width vw(375)
        height vw(60)
        line-height vw(21)
        display flex
        justify-content center
        box-sizing border-box
        word-vw(word16, gray3)
        padding smallMargin
        .confirm {
            //btn-center()
            big-solid()
            justify-content center
        }
    }

</style>